<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Virtualized Table | Element Plus</title>
    <meta name="description" content="A Vue 3 based component library for designers and developers">
    <link rel="stylesheet" href="/assets/style.e2a9e121.css">
    <link rel="modulepreload" href="/assets/chunks/tree-data.571cf9ca.js">
    <link rel="modulepreload" href="/assets/chunks/contributors.b1907dec.js">
    <link rel="modulepreload" href="/assets/app.9c6c24e4.js">
    <link rel="modulepreload" href="/assets/chunks/dayjs.min.64b12ca8.js">
    <link rel="modulepreload" href="/assets/en-US_component_table-v2.md.2105af2e.lean.js">
    
    <link rel="icon" href="/images/element-plus-logo-small.svg" type="image/svg+xm">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">
  <meta name="msapplication-TileColor" content="#409eff">
  <meta name="msapplication-config" content="/browserconfig.xml">
  <meta property="og:image" content="/images/element-plus-og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:description" content="A Vue 3 based component library for designers and developers">
  <script>window.supportedLangs=["en-US","es-ES","zh-CN"];</script>
  <script>(()=>{const o=window.supportedLangs,a="preferred_lang",r="en-US",s={en:"en-US",fr:"fr-FR",es:"es-ES"};let e=localStorage.getItem(a)||navigator.language;const n=s[e]||(o.includes(e)?e:r);if(localStorage.setItem(a,n),e=n,!location.pathname.startsWith(`/${e}`)){const t=[`/${e}`].concat(location.pathname.split("/").slice(2)).join("/");location.pathname=t.endsWith(".html")||t.endsWith("/")?t:t.concat("/")}navigator&&navigator.serviceWorker.controller&&navigator.serviceWorker.controller.postMessage({type:"LANG",lang:e})})();</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=UA-175337989-1"></script>
  <script>"serviceWorker"in navigator&&navigator.serviceWorker.register("/sw.js").then(function(o){console.log(o)}).catch(function(o){console.log(o)});</script>
  <script async="true">window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","UA-175337989-1");</script>
  <script async="true" src="https://www.googletagmanager.com/gtag/js?id=G-M74ZHEQ1M1"></script>
  <script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date),gtag("config","G-M74ZHEQ1M1");</script>
  <script async="true">var resource=document.createElement("link");resource.setAttribute("rel","stylesheet"),resource.setAttribute("href","https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800|Open+Sans:400,600;display=swap"),resource.setAttribute("type","text/css");var head=document.querySelector("head");head.appendChild(resource);</script>
  <script>(()=>{const e=localStorage.getItem("el-theme-appearance");(e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <meta name="twitter:title" content="Virtualized Table | Element Plus">
  <meta property="og:title" content="Virtualized Table | Element Plus">
  </head>
  <body>
    <div id="app"><div class="App"><!--[--><span tabindex="-1" data-v-d2e1b550></span><a href="#page-content" class="skip-link visually-hidden" data-v-d2e1b550>Skip to content</a><!--]--><!----><header class="navbar has-sidebar"><div class="navbar-wrapper" data-v-74f3ae96><div class="header-container" data-v-74f3ae96><div class="logo-container" data-v-74f3ae96><a href="/en-US/" data-v-74f3ae96><img class="logo" src="/images/element-plus-logo.svg" alt="Element Plus Logo" data-v-74f3ae96></a></div><div class="content" data-v-74f3ae96><div id="docsearch" class="algolia-search-box search" data-v-74f3ae96></div><nav class="navbar-menu menu" data-v-74f3ae96><!--[--><a class="link-item link is-menu-link" href="/en-US/guide/design" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Guide<!--]--><!--]--><!----></a><a class="link-item link is-menu-link active" href="/en-US/component/overview" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Component<!--]--><!--]--><!----></a><a class="link-item link is-menu-link" href="/en-US/resource/index" data-v-76aa4338 data-v-36735cb0><!--[--><!--[-->Resource<!--]--><!--]--><!----></a><!--]--></nav><div class="theme-toggler-content theme-toggler" data-v-74f3ae96 data-v-b1b91f92><div aria-label="toggle dark mode" aria-checked="false" data-v-b1b91f92 data-v-0180af72><!----></div></div><div class="translation-container translation" data-v-74f3ae96 data-v-12008bb2><!----></div><div class="social-links" data-v-74f3ae96 data-v-76aa5200><!--[--><a href="https://github.com/element-plus/element-plus" title="GitHub" target="_blank" rel="noreferrer noopener" class="social-link" data-v-76aa5200 data-v-72eabb9c><i class="el-icon" style="font-size:24px;" data-v-72eabb9c><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-72eabb9c><path fill="currentColor" d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476c0-.237-.013-1.024-.013-1.862c-2.512.463-3.162-.612-3.362-1.175c-.113-.288-.6-1.175-1.025-1.413c-.35-.187-.85-.65-.013-.662c.788-.013 1.35.725 1.538 1.025c.9 1.512 2.338 1.087 2.912.825c.088-.65.35-1.087.638-1.337c-2.225-.25-4.55-1.113-4.55-4.938c0-1.088.387-1.987 1.025-2.688c-.1-.25-.45-1.275.1-2.65c0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337c1.912-1.3 2.75-1.024 2.75-1.024c.55 1.375.2 2.4.1 2.65c.637.7 1.025 1.587 1.025 2.687c0 3.838-2.337 4.688-4.562 4.938c.362.312.675.912.675 1.85c0 1.337-.013 2.412-.013 2.75c0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10z"></path></svg><!--]--></i></a><!--]--></div><button class="reset-btn menu-hamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="full-screen" data-v-74f3ae96><span class="hamburger-1"></span><span class="hamburger-2"></span><span class="hamburger-3"></span></button></div></div></div><!----></header><div class="sub-nav py-3 flex items-center"><button class="reset-btn sidebar-button flex items-center" aria-expanded="false"><i class="el-icon mr-2" style="font-size:20px;"><!--[--><svg width="20" height="20" viewbox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="7" width="11" height="2" fill="#606266"></rect><rect x="2" y="11" width="14" height="2" fill="#606266"></rect><rect x="2" y="15" width="8" height="2" fill="#606266"></rect><rect x="2" y="3" width="16" height="2" fill="#606266"></rect></svg><!--]--></i><span class="leading-6">Menu</span></button><button ariadisabled="false" type="button" class="el-button is-link go-back-top height-5" style=""><!--v-if--><span class=""><!--[--> Back to top <!--]--></span></button></div><div class="el-scrollbar sidebar"><div class="el-scrollbar__wrap el-scrollbar__wrap--hidden-default" style=""><div class="el-scrollbar__view" style=""><!--[--><aside><!--[--><div class="page-content-main-b" data-v-0407b15a><p class="title" data-v-0407b15a>Sponsored by</p><div data-v-0407b15a data-v-23d0a532><!--[--><a href="https://melecode.com/" title="美乐 - 企业级全栈低代码开发平台" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/mele-banner.png" alt="美乐" data-v-23d0a532></a><a href="https://vform666.com/" title="VForm - Vue 2/3 可视化低代码表单" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/vform-banner.png" alt="VForm" data-v-23d0a532></a><a href="https://www.jnpfsoft.com/index.html?from=elementUI" title="JNPF - JNPF 低代码开发平台，让开发变得简单！" class="sponsor-item inline-flex" style="" target="_blank" data-v-23d0a532><img src="/images/sponsors/jnpfsoft.jpg" alt="JNPF" data-v-23d0a532></a><!--]--></div><div data-v-0407b15a data-v-97807a40><!--[--><!--]--></div></div><!--]--><div class="sidebar-groups"><!--[--><section class="sidebar-group"><p class="sidebar-group__title">Overview</p><!--[--><a class="link" href="/en-US/component/overview" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Overview</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Basic</p><!--[--><a class="link" href="/en-US/component/button" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Button</p><!----></a><a class="link" href="/en-US/component/border" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Border</p><!----></a><a class="link" href="/en-US/component/color" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color</p><!----></a><a class="link" href="/en-US/component/container" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Layout Container</p><!----></a><a class="link" href="/en-US/component/icon" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Icon</p><!----></a><a class="link" href="/en-US/component/layout" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Layout</p><!----></a><a class="link" href="/en-US/component/link" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Link</p><!----></a><a class="link flex items-center" href="/en-US/component/text" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Text</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.3.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/scrollbar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Scrollbar</p><!----></a><a class="link" href="/en-US/component/space" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Space</p><!----></a><a class="link" href="/en-US/component/typography" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Typography</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Configuration</p><!--[--><a class="link" href="/en-US/component/config-provider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Config Provider</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Form</p><!--[--><a class="link" href="/en-US/component/autocomplete" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Autocomplete</p><!----></a><a class="link" href="/en-US/component/cascader" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Cascader</p><!----></a><a class="link" href="/en-US/component/checkbox" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Checkbox</p><!----></a><a class="link" href="/en-US/component/color-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Color Picker</p><!----></a><a class="link" href="/en-US/component/date-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Date Picker</p><!----></a><a class="link" href="/en-US/component/datetime-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>DateTime Picker</p><!----></a><a class="link" href="/en-US/component/form" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Form</p><!----></a><a class="link" href="/en-US/component/input" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input</p><!----></a><a class="link" href="/en-US/component/input-number" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Input Number</p><!----></a><a class="link" href="/en-US/component/radio" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Radio</p><!----></a><a class="link" href="/en-US/component/rate" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Rate</p><!----></a><a class="link" href="/en-US/component/select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Select</p><!----></a><a class="link" href="/en-US/component/select-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Select</p><!----></a><a class="link" href="/en-US/component/slider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Slider</p><!----></a><a class="link" href="/en-US/component/switch" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Switch</p><!----></a><a class="link" href="/en-US/component/time-picker" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Picker</p><!----></a><a class="link" href="/en-US/component/time-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Time Select</p><!----></a><a class="link" href="/en-US/component/transfer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Transfer</p><!----></a><a class="link flex items-center" href="/en-US/component/tree-select" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>TreeSelect</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.1.8<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/upload" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Upload</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Data</p><!--[--><a class="link" href="/en-US/component/avatar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Avatar</p><!----></a><a class="link" href="/en-US/component/badge" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Badge</p><!----></a><a class="link" href="/en-US/component/calendar" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Calendar</p><!----></a><a class="link" href="/en-US/component/card" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Card</p><!----></a><a class="link" href="/en-US/component/carousel" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Carousel</p><!----></a><a class="link" href="/en-US/component/collapse" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Collapse</p><!----></a><a class="link" href="/en-US/component/descriptions" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Descriptions</p><!----></a><a class="link" href="/en-US/component/empty" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Empty</p><!----></a><a class="link" href="/en-US/component/image" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Image</p><!----></a><a class="link" href="/en-US/component/infinite-scroll" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Infinite Scroll</p><!----></a><a class="link" href="/en-US/component/pagination" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Pagination</p><!----></a><a class="link" href="/en-US/component/progress" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Progress</p><!----></a><a class="link" href="/en-US/component/result" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Result</p><!----></a><a class="link" href="/en-US/component/skeleton" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Skeleton</p><!----></a><a class="link" href="/en-US/component/table" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Table</p><!----></a><a class="link active flex items-center" href="/en-US/component/table-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Table</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tag" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tag</p><!----></a><a class="link" href="/en-US/component/timeline" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Timeline</p><!----></a><a class="link flex items-center" href="/en-US/component/tour" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tour</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.5.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/tree" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tree</p><!----></a><a class="link" href="/en-US/component/tree-v2" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Virtualized Tree</p><!----></a><a class="link flex items-center" href="/en-US/component/statistic" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Statistic</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.2.30<!--]--></span><!--v-if--></span></a><a class="link flex items-center" href="/en-US/component/segmented" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Segmented</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.7.0<!--]--></span><!--v-if--></span></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Navigation</p><!--[--><a class="link" href="/en-US/component/affix" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Affix</p><!----></a><a class="link flex items-center" href="/en-US/component/anchor" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Anchor</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.6.0<!--]--></span><!--v-if--></span></a><a class="link" href="/en-US/component/backtop" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Backtop</p><!----></a><a class="link" href="/en-US/component/breadcrumb" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Breadcrumb</p><!----></a><a class="link" href="/en-US/component/dropdown" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dropdown</p><!----></a><a class="link" href="/en-US/component/menu" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Menu</p><!----></a><a class="link" href="/en-US/component/page-header" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Page Header</p><!----></a><a class="link" href="/en-US/component/steps" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Steps</p><!----></a><a class="link" href="/en-US/component/tabs" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tabs</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Feedback</p><!--[--><a class="link" href="/en-US/component/alert" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Alert</p><!----></a><a class="link" href="/en-US/component/dialog" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Dialog</p><!----></a><a class="link" href="/en-US/component/drawer" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Drawer</p><!----></a><a class="link" href="/en-US/component/loading" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Loading</p><!----></a><a class="link" href="/en-US/component/message" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message</p><!----></a><a class="link" href="/en-US/component/message-box" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Message Box</p><!----></a><a class="link" href="/en-US/component/notification" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Notification</p><!----></a><a class="link" href="/en-US/component/popconfirm" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popconfirm</p><!----></a><a class="link" href="/en-US/component/popover" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Popover</p><!----></a><a class="link" href="/en-US/component/tooltip" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Tooltip</p><!----></a><!--]--></section><section class="sidebar-group"><p class="sidebar-group__title">Others</p><!--[--><a class="link" href="/en-US/component/divider" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Divider</p><!----></a><a class="link flex items-center" href="/en-US/component/watermark" data-v-189bd8ba><p class="link-text" data-v-189bd8ba>Watermark</p><span class="el-tag el-tag--primary el-tag--small el-tag--plain is-hit is-round ml-2" style="" data-v-189bd8ba><span class="el-tag__content"><!--[-->2.4.0<!--]--></span><!--v-if--></span></a><!--]--></section><!--]--></div><!--[--><!--]--></aside><!--]--></div></div><!--[--><div class="el-scrollbar__bar is-horizontal" style="display:none;"><div class="el-scrollbar__thumb" style="width:;transform:translateX(0%);"></div></div><div class="el-scrollbar__bar is-vertical" style="display:none;"><div class="el-scrollbar__thumb" style="height:;transform:translateY(0%);"></div></div><!--]--></div><main id="page-content" class="page-content has-sidebar"><div class="doc-content-wrapper"><div class="doc-content-container"><div style="position:relative;" class="doc-content"><div><h1 id="virtualized-table" tabindex="-1">Virtualized Table <span class="vp-tag beta">beta</span> <a class="header-anchor vp-link" href="#virtualized-table" aria-hidden="true">#</a></h1><p>Along with evolutionary web development, table component has always been the most popular component in our web apps especially for dashboards, data analysis. For <a href="./table.html" class="vp-link">Table V1</a>, with even just 1000 records of data, it can be very annoying when using it, because of the poor performance.</p><p>With Virtualized Table, you can render massive chunks of data in a blink of an eye.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>This component is <strong>still under testing</strong>, use at your own risk. If you find any bugs or issues, please report them at <a href="https://github.com/element-plus/element-plus/issues" class="vp-link" target="_blank" rel="noopener noreferrer">GitHub<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> for us to fix. Also there were some APIs which are not mentioned in this documentation, some of them were not fully developed yet, which is why they are not mentioned here.</p><p><strong>Even though</strong> Virtualized Table is efficient, when the data load is too large, your <strong>network</strong> and <strong>memory size</strong> can become the bottleneck of your app. So keep in mind that Virtualized Table is never the ultimate solution for everything, consider paginating your data, adding filters etc.</p></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>This component requires the <code>&lt;client-only&gt;&lt;/client-only&gt;</code> wrap when used in SSR (eg: <a href="https://nuxt.com/v3" class="vp-link" target="_blank" rel="noopener noreferrer">Nuxt<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>) and SSG (eg: <a href="https://vitepress.vuejs.org/" class="vp-link" target="_blank" rel="noopener noreferrer">VitePress<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a>).</p></div><h2 id="basic-usage" tabindex="-1">Basic usage <a class="header-anchor vp-link" href="#basic-usage" aria-hidden="true">#</a></h2><p>Let&#39;s demonstrate the performance of the Virtualized Table by rendering a basic example with 10 columns and 1000 rows.</p><!----><h2 id="auto-resizer" tabindex="-1">Auto resizer <a class="header-anchor vp-link" href="#auto-resizer" aria-hidden="true">#</a></h2><p>When you do not want to manually pass the <code>width</code> and <code>height</code> properties to the table, you can wrap the table component with the AutoResizer. This will automatically update the width and height for you.</p><p>Resize your browser to see how it works.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Make sure the parent node of the <code>AutoResizer</code> <strong>HAS A FIXED HEIGHT</strong>, since its default height value is set to 100%. Alternatively, you can define it by passing the <code>style</code> attribute to <code>AutoResizer</code>.</p></div><!----><h2 id="customize-cell-renderer" tabindex="-1">Customize Cell Renderer <a class="header-anchor vp-link" href="#customize-cell-renderer" aria-hidden="true">#</a></h2><p>Of course, you can render the table cell according to your needs. Here&#39;s a simple example of how to customize your cell.</p><!----><h2 id="table-with-selections" tabindex="-1">Table with selections <a class="header-anchor vp-link" href="#table-with-selections" aria-hidden="true">#</a></h2><p>Using customized cell renderer to allow selection for your table.</p><!----><h2 id="inline-editing" tabindex="-1">Inline editing <a class="header-anchor vp-link" href="#inline-editing" aria-hidden="true">#</a></h2><p>Just as we demonstrated with selections above, you can use the same method to enable inline editing.</p><!----><h2 id="table-with-status" tabindex="-1">Table with status <a class="header-anchor vp-link" href="#table-with-status" aria-hidden="true">#</a></h2><p>You can highlight your table content to distinguish between &quot;success, information, warning, danger&quot; and other states.</p><p>To customize the appearance of rows, use the <code>row-class-name</code> attribute. For example, every 10th row is highlighted using the <code>bg-blue-200</code> class, and every 5th row with the <code>bg-red-100</code> class.</p><!----><h2 id="table-with-sticky-rows" tabindex="-1">Table with sticky rows <a class="header-anchor vp-link" href="#table-with-sticky-rows" aria-hidden="true">#</a></h2><p>You can make some rows stick to the top of the table, and that can be very easily achieved by using the <code>fixed-data</code> attribute.</p><p>You can dynamically set the sticky row based on scroll events, as shown in this example.</p><!----><h2 id="table-with-fixed-columns" tabindex="-1">Table with fixed columns <a class="header-anchor vp-link" href="#table-with-fixed-columns" aria-hidden="true">#</a></h2><p>If you want to have columns stick to the left or right for some reason, you can achieve this by adding special attributes to the table.</p><p>You can set the column&#39;s attribute <code>fixed</code> to <code>true</code> (representing <code>FixedDir.LEFT</code>) or <code>FixedDir.LEFT</code> or <code>FixedDir.RIGHT</code></p><!----><h2 id="grouping-header" tabindex="-1">Grouping header <a class="header-anchor vp-link" href="#grouping-header" aria-hidden="true">#</a></h2><p>By customizing your header renderer, you can group your header as shown in this example.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>In this case we used <code>JSX</code> feature which is not supported in the playground. You may try them out in your local environment or on online IDEs such as <code>codesandbox</code>.</p><p>It is recommended that you write your table component in JSX, since it contains VNode manipulations.</p></div><!----><h2 id="filter" tabindex="-1">Filter <a class="header-anchor vp-link" href="#filter" aria-hidden="true">#</a></h2><p>Virtualized Table provides custom header renderers for creating customized headers. We can then utilize these to render filters.</p><!----><h2 id="sortable" tabindex="-1">Sortable <a class="header-anchor vp-link" href="#sortable" aria-hidden="true">#</a></h2><p>You can sort the table with sort state.</p><!----><h2 id="controlled-sort" tabindex="-1">Controlled Sort <a class="header-anchor vp-link" href="#controlled-sort" aria-hidden="true">#</a></h2><p>You can define multiple sortable columns as needed. Keep in mind that if you define multiple sortable columns, the UI may appear confusing to your users, as it becomes unclear which column is currently being sorted.</p><!----><h2 id="cross-hovering" tabindex="-1">Cross hovering <a class="header-anchor vp-link" href="#cross-hovering" aria-hidden="true">#</a></h2><p>When dealing with a large list, it&#39;s easy to lose track of the current row and column you are visiting. In such cases, using this feature can be very helpful.</p><!----><h2 id="colspan" tabindex="-1">Colspan <a class="header-anchor vp-link" href="#colspan" aria-hidden="true">#</a></h2><p>The virtualized table doesn&#39;t use the built-in <code>table</code> element, so <code>colspan</code> and <code>rowspan</code> behave a bit differently compared to <a href="./table.html" class="vp-link">TableV1</a>. However, with a customized row renderer, these features can still be implemented. In this section, we&#39;ll demonstrate how to achieve this.</p><!----><h2 id="rowspan" tabindex="-1">Rowspan <a class="header-anchor vp-link" href="#rowspan" aria-hidden="true">#</a></h2><p>Since we have covered <a href="#colspan" class="vp-link">Colspan</a>, it&#39;s worth noting that we also have row span. It&#39;s a little bit different from colspan but the idea is basically the same.</p><!----><h2 id="rowspan-and-colspan-together" tabindex="-1">Rowspan and Colspan together <a class="header-anchor vp-link" href="#rowspan-and-colspan-together" aria-hidden="true">#</a></h2><p>We can combine rowspan and colspan together to meet your business goal!</p><!----><h2 id="tree-data" tabindex="-1">Tree data <a class="header-anchor vp-link" href="#tree-data" aria-hidden="true">#</a></h2><p>Virtual Table can also render data in a tree-like structure. By clicking the arrow icon, you can expand or collapse the tree nodes.</p><!----><h2 id="dynamic-height-rows" tabindex="-1">Dynamic height rows <a class="header-anchor vp-link" href="#dynamic-height-rows" aria-hidden="true">#</a></h2><p>Virtual Table is capable of rendering rows with dynamic heights. If you&#39;re working with data and are uncertain about the content size, this feature is ideal for rendering rows that adjust to the content&#39;s height. To enable this, pass down the <code>estimated-row-height</code> attribute. The closer the estimated height matches the actual content, the smoother the rendering experience.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Each row&#39;s height is dynamically measured during rendering the rows. As a result, if you&#39;re trying to display a large amount of data, the UI <strong>might be</strong> bouncing.</p></div><!----><h2 id="detail-view" tabindex="-1">Detail view <a class="header-anchor vp-link" href="#detail-view" aria-hidden="true">#</a></h2><p>Using dynamic height rendering, you can also display a detailed view within the table.</p><!----><h2 id="customized-footer" tabindex="-1">Customized Footer <a class="header-anchor vp-link" href="#customized-footer" aria-hidden="true">#</a></h2><p>Render a customized footer when you want to show a concluding message or information.</p><!----><h2 id="customized-empty-renderer" tabindex="-1">Customized Empty Renderer <a class="header-anchor vp-link" href="#customized-empty-renderer" aria-hidden="true">#</a></h2><p>Render a customized empty element.</p><!----><h2 id="overlay" tabindex="-1">Overlay <a class="header-anchor vp-link" href="#overlay" aria-hidden="true">#</a></h2><p>Render an overlay on top of the table when you want to show a loading indicator or something else.</p><!----><h2 id="manual-scrolling" tabindex="-1">Manual scrolling <a class="header-anchor vp-link" href="#manual-scrolling" aria-hidden="true">#</a></h2><p>Use the methods provided by Table V2 to scroll manually/programmatically with desired offset/rows.</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>The second parameter for <code>scrollToRow</code> is the scrolling strategy which by default is <code>auto</code>, it calculates the position to scroll by itself. If you wish to scroll to a specific position, you can define the strategy yourself. The available options are <code>&quot;auto&quot; | &quot;center&quot; | &quot;end&quot; | &quot;start&quot; | &quot;smart&quot;</code></p><p>The difference between <code>smart</code> and <code>auto</code> is that <code>auto</code> is a subset of <code>smart</code> scroll strategy.</p></div><!----><h2 id="tablev2-attributes" tabindex="-1">TableV2 Attributes <a class="header-anchor vp-link" href="#tablev2-attributes" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>cache</td><td>Number of rows rendered in advance to boost the performance</td><td>Number</td><td>2</td></tr><tr><td>estimated-row-height</td><td>The estimated row height for rendering dynamic height rows</td><td>Number</td><td>—</td></tr><tr><td>header-class</td><td>Customized class name passed to header wrapper</td><td>String/Function&lt;<a href="#typings" class="vp-link">HeaderClassGetter</a>&gt;</td><td>—</td></tr><tr><td>header-props</td><td>Customized props name passed to header component</td><td>Object/Function&lt;<a href="#typings" class="vp-link">HeaderPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>header-cell-props</td><td>Customized props name passed to header cell component</td><td>Object/Function&lt;<a href="#typings" class="vp-link">HeaderCellPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>header-height</td><td>The height of the header is set by <code>height</code>. If given an array, it renders header rows equal to its length</td><td>Number/Array&lt;Number&gt;</td><td>50</td></tr><tr><td>footer-height</td><td>The height of the footer element, when provided, will be part to the calculation of the table&#39;s height.</td><td>Number</td><td>0</td></tr><tr><td>row-class</td><td>Customized class name passed to row wrapper</td><td>String/Function&lt;<a href="#typings" class="vp-link">RowClassGetter</a>&gt;</td><td>—</td></tr><tr><td>row-key</td><td>The key of each row, if not provided, will be the index of the row</td><td>String/Symbol/Number</td><td>id</td></tr><tr><td>row-props</td><td>Customized props name passed to row component</td><td>Object/Function&lt;<a href="#typings" class="vp-link">RowPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>row-height</td><td>The height of each row, used for calculating the total height of the table</td><td>Number</td><td>50</td></tr><tr><td>cell-props</td><td>extra props passed to each cell (except header cells)</td><td>Object/Function&lt;<a href="#typings" class="vp-link">CellPropsGetter</a>&gt;</td><td>—</td></tr><tr><td>columns</td><td>An array of column definitions.</td><td>Array&lt;<a href="#column-attribute" class="vp-link">Column</a>&gt;</td><td>—</td></tr><tr><td>data</td><td>An array of data to be rendered in the table.</td><td>Array&lt;<a href="#typings" class="vp-link">Data</a>&gt;</td><td>[]</td></tr><tr><td>data-getter</td><td>A method to customize data fetch from the data source.</td><td>Function</td><td>—</td></tr><tr><td>fixed-data</td><td>Data for rendering rows above the main content and below the header</td><td>Array&lt;<a href="#typings" class="vp-link">Data</a>&gt;</td><td>—</td></tr><tr><td>expand-column-key</td><td>The column key indicates which row is expandable</td><td>String</td><td>—</td></tr><tr><td>expanded-row-keys</td><td>An array of keys for expanded rows, can be used with <code>v-model</code></td><td>Array&lt;<a href="#typings" class="vp-link">KeyType</a>&gt;</td><td>—</td></tr><tr><td>default-expanded-row-keys</td><td>An array of keys for default expanded rows, <strong>NON REACTIVE</strong></td><td>Array&lt;<a href="#typings" class="vp-link">KeyType</a>&gt;</td><td>—</td></tr><tr><td>class</td><td>Class name for the virtual table, will be applied to all three tables (left, right, main)</td><td>String/Array/Object</td><td>—</td></tr><tr><td>fixed</td><td>Flag indicates the table column&#39;s width to be fixed or flexible.</td><td>Boolean</td><td>false</td></tr><tr><td>width <span class="vp-tag required">required</span></td><td>Width of the table</td><td>Number</td><td>—</td></tr><tr><td>height <span class="vp-tag required">required</span></td><td>Height of the table</td><td>Number</td><td>—</td></tr><tr><td>max-height</td><td>Maximum height of the table</td><td>Number</td><td>—</td></tr><tr><td>h-scrollbar-size</td><td>Indicates the horizontal scrollbar&#39;s size for the table, used to prevent the horizontal and vertical scrollbar to collapse</td><td>Number</td><td>6</td></tr><tr><td>v-scrollbar-size</td><td>Indicates the vertical scrollbar&#39;s size for the table, used to prevent the horizontal and vertical scrollbar to collapse</td><td>Number</td><td>6</td></tr><tr><td>scrollbar-always-on</td><td>If true, the scrollbar will always be shown instead of when mouse is placed above the table</td><td>Boolean</td><td>false</td></tr><tr><td>sort-by</td><td>Sort indicator</td><td>Object&lt;<a href="#typings" class="vp-link">SortBy</a>&gt;</td><td>{}</td></tr><tr><td>sort-state</td><td>Multiple sort indicator</td><td>Object&lt;<a href="#typings" class="vp-link">SortState</a>&gt;</td><td>undefined</td></tr></tbody></table></div><h2 id="tablev2-slots" tabindex="-1">TableV2 Slots <a class="header-anchor vp-link" href="#tablev2-slots" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>Name</th><th>Params</th></tr></thead><tbody><tr><td>cell</td><td><a href="#typings" class="vp-link">CellSlotProps</a></td></tr><tr><td>header</td><td><a href="#typings" class="vp-link">HeaderSlotProps</a></td></tr><tr><td>header-cell</td><td><a href="#typings" class="vp-link">HeaderCellSlotProps</a></td></tr><tr><td>row</td><td><a href="#typings" class="vp-link">RowSlotProps</a></td></tr><tr><td>footer</td><td>—</td></tr><tr><td>empty</td><td>—</td></tr><tr><td>overlay</td><td>—</td></tr></tbody></table></div><h2 id="tablev2-events" tabindex="-1">TableV2 Events <a class="header-anchor vp-link" href="#tablev2-events" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>column-sort</td><td>Invoked when column sorted</td><td>Object&lt;ColumnSortParam&gt;</td></tr><tr><td>expanded-rows-change</td><td>Invoked when expanded rows changed</td><td><code>Array&lt;KeyType&gt;</code></td></tr><tr><td>end-reached</td><td>Invoked when the end of the table is reached</td><td>—</td></tr><tr><td>scroll</td><td>Invoked after scrolling</td><td>Object&lt;<a href="#typings" class="vp-link">ScrollParams</a>&gt;</td></tr><tr><td>rows-rendered</td><td>Invoked when rows are rendered</td><td>Object&lt;<a href="#typings" class="vp-link">RowsRenderedParams</a>&gt;</td></tr><tr><td>row-expand</td><td>Invoked when expand/collapse the tree node by clicking the arrow icon</td><td>Object&lt;<a href="#typings" class="vp-link">RowExpandParams</a>&gt;</td></tr><tr><td>row-event-handlers</td><td>A collection of handlers attached to each row</td><td>Object&lt;<a href="#typings" class="vp-link">RowEventHandlers</a>&gt;</td></tr></tbody></table></div><h2 id="tablev2-methods" tabindex="-1">TableV2 Methods <a class="header-anchor vp-link" href="#tablev2-methods" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>Event Name</th><th>Description</th><th>Parameters</th></tr></thead><tbody><tr><td>scrollTo</td><td>Scroll to a given position</td><td><code>{ scrollLeft?: number, scrollTop?: number}</code></td></tr><tr><td>scrollToLeft</td><td>Scroll to a given horizontal position</td><td><code>scrollLeft: number</code></td></tr><tr><td>scrollToTop</td><td>Scroll to a given vertical position</td><td><code>scrollTop: number</code></td></tr><tr><td>scrollToRow</td><td>scroll to a given row with specified scroll strategy</td><td><code>row: number, strategy?: &quot;auto&quot; |&quot;center&quot; | &quot;end&quot; | &quot;start&quot; | &quot;smart&quot;</code></td></tr></tbody></table></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Note that these are <code>JavaScript</code> Objects, so you <strong>CANNOT USE</strong> kebab-case for these attributes</p></div><h2 id="column-attribute" tabindex="-1">Column Attribute <a class="header-anchor vp-link" href="#column-attribute" aria-hidden="true">#</a></h2><div class="vp-table"><table><thead><tr><th>Name</th><th>Description</th><th>Type</th><th>Default</th></tr></thead><tbody><tr><td>align</td><td>Alignment of the table cell content</td><td><a href="https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L6" class="vp-link" target="_blank" rel="noopener noreferrer">Alignment<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></td><td>left</td></tr><tr><td>class</td><td>Class name for the column</td><td>String</td><td>—</td></tr><tr><td>fixed</td><td>Fixed direction of the column</td><td>Boolean/<a href="https://github.com/element-plus/element-plus/blob/b92b22932758f0ddea98810ae248f6ca62f77e25/packages/components/table-v2/src/constants.ts#L11" class="vp-link" target="_blank" rel="noopener noreferrer">FixedDir<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></td><td>false</td></tr><tr><td>flexGrow</td><td>CSSProperties flex grow, Only useful when this is not a fixed table</td><td>Number</td><td>0</td></tr><tr><td>flexShrink</td><td>CSSProperties flex shrink, Only useful when this is not a fixed table</td><td>Number</td><td>1</td></tr><tr><td>headerClass</td><td>Used for customizing header column class</td><td>String</td><td>—</td></tr><tr><td>hidden</td><td>Whether the column is invisible</td><td>Boolean</td><td>—</td></tr><tr><td>style</td><td>Customized style for column cell, will be merged with grid cell</td><td>CSSProperties</td><td>—</td></tr><tr><td>sortable</td><td>Indicates whether the column is sortable</td><td>Boolean</td><td>—</td></tr><tr><td>title</td><td>The default text rendered in header cell</td><td>String</td><td>—</td></tr><tr><td>maxWidth</td><td>Maximum width for the column</td><td>Number</td><td>—</td></tr><tr><td>minWidth</td><td>Minimum width for the column</td><td>Number</td><td>—</td></tr><tr><td>width <span class="vp-tag required">required</span></td><td>Width for the column</td><td>Number</td><td>—</td></tr><tr><td>cellRenderer</td><td>Customized Cell renderer</td><td>VueComponent/(props: <a href="#typings" class="vp-link">CellRenderProps</a>) =&gt; VNode</td><td>—</td></tr><tr><td>headerCellRenderer</td><td>Customized Header renderer</td><td>VueComponent/(props: <a href="#typings" class="vp-link">HeaderRenderProps</a>) =&gt; VNode</td><td>—</td></tr></tbody></table></div><h2 id="typings" tabindex="-1">Typings <a class="header-anchor vp-link" href="#typings" aria-hidden="true">#</a></h2><details><summary>Show Type Declarations</summary><div class="language-ts"><pre><code><span class="token keyword">type</span> <span class="token class-name">HeaderClassGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderCellPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  style<span class="token operator">:</span> CSSProperties
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>

<span class="token keyword">type</span> <span class="token class-name">RowClassGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span>

<span class="token keyword">type</span> <span class="token class-name">RowPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> <span class="token builtin">any</span><span class="token operator">&gt;</span>

<span class="token keyword">type</span> <span class="token class-name">CellPropsGetter</span> <span class="token operator">=</span> <span class="token punctuation">(</span>param<span class="token operator">:</span> <span class="token punctuation">{</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  cellData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>

<span class="token keyword">type</span> <span class="token class-name">CellRenderProps<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  cellData<span class="token operator">:</span> <span class="token constant">T</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderRenderProps<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">ScrollParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  xAxisScrollDir<span class="token operator">:</span> <span class="token string">&#39;forward&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;backward&#39;</span>
  scrollLeft<span class="token operator">:</span> <span class="token builtin">number</span>
  yAxisScrollDir<span class="token operator">:</span> <span class="token string">&#39;forward&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;backward&#39;</span>
  scrollTop<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">CellSlotProps<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  depth<span class="token operator">:</span> <span class="token builtin">number</span>
  style<span class="token operator">:</span> CSSProperties
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  isScrolling<span class="token operator">:</span> <span class="token builtin">boolean</span>
  expandIconProps<span class="token operator">?</span><span class="token operator">:</span>
    <span class="token operator">|</span> <span class="token punctuation">{</span>
        rowData<span class="token operator">:</span> <span class="token builtin">any</span>
        rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
        <span class="token function-variable function">onExpand</span><span class="token operator">:</span> <span class="token punctuation">(</span>expand<span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
      <span class="token punctuation">}</span>
    <span class="token operator">|</span> <span class="token keyword">undefined</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderSlotProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  cells<span class="token operator">:</span> VNode<span class="token punctuation">[</span><span class="token punctuation">]</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">HeaderCellSlotProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token keyword">class</span><span class="token operator">:</span> <span class="token builtin">string</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  headerIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  style<span class="token operator">:</span> CSSProperties
  headerCellProps<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">any</span>
  sortBy<span class="token operator">:</span> SortBy
  sortState<span class="token operator">?</span><span class="token operator">:</span> SortState <span class="token operator">|</span> <span class="token keyword">undefined</span>
  <span class="token function-variable function">onColumnSorted</span><span class="token operator">:</span> <span class="token punctuation">(</span>e<span class="token operator">:</span> MouseEvent<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowCommonParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowEventHandlerParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  rowKey<span class="token operator">:</span> KeyType
  event<span class="token operator">:</span> Event
<span class="token punctuation">}</span> <span class="token operator">&amp;</span> RowCommonParams

<span class="token keyword">type</span> <span class="token class-name">RowEventHandler</span> <span class="token operator">=</span> <span class="token punctuation">(</span>params<span class="token operator">:</span> RowEventHandlerParams<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span>
<span class="token keyword">type</span> <span class="token class-name">RowEventHandlers</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  onClick<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onContextmenu<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onDblclick<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onMouseenter<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
  onMouseleave<span class="token operator">?</span><span class="token operator">:</span> RowEventHandler
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowsRenderedParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  rowCacheStart<span class="token operator">:</span> <span class="token builtin">number</span>
  rowCacheEnd<span class="token operator">:</span> <span class="token builtin">number</span>
  rowVisibleStart<span class="token operator">:</span> <span class="token builtin">number</span>
  rowVisibleEnd<span class="token operator">:</span> <span class="token builtin">number</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowSlotProps</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  columns<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span><span class="token punctuation">[</span><span class="token punctuation">]</span>
  rowData<span class="token operator">:</span> <span class="token builtin">any</span>
  columnIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  rowIndex<span class="token operator">:</span> <span class="token builtin">number</span>
  data<span class="token operator">:</span> <span class="token builtin">any</span>
  key<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">string</span>
  isScrolling<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span>
  style<span class="token operator">:</span> CSSProperties
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">RowExpandParams</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  expanded<span class="token operator">:</span> <span class="token builtin">boolean</span>
  rowKey<span class="token operator">:</span> KeyType
<span class="token punctuation">}</span> <span class="token operator">&amp;</span> RowCommonParams

<span class="token keyword">type</span> <span class="token class-name">Data</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token punctuation">[</span>key<span class="token operator">:</span> KeyType<span class="token punctuation">]</span><span class="token operator">:</span> <span class="token builtin">any</span>
  children<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">any</span><span class="token operator">&gt;</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">FixedData</span> <span class="token operator">=</span> Data

<span class="token keyword">type</span> <span class="token class-name">KeyType</span> <span class="token operator">=</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">symbol</span>

<span class="token keyword">type</span> <span class="token class-name">ColumnSortParam<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span></span> <span class="token operator">=</span> <span class="token punctuation">{</span> column<span class="token operator">:</span> Column<span class="token operator">&lt;</span><span class="token constant">T</span><span class="token operator">&gt;</span><span class="token punctuation">;</span> key<span class="token operator">:</span> KeyType<span class="token punctuation">;</span> order<span class="token operator">:</span> SortOrder <span class="token punctuation">}</span>

<span class="token keyword">enum</span> SortOrder <span class="token punctuation">{</span>
  <span class="token constant">ASC</span> <span class="token operator">=</span> <span class="token string">&#39;asc&#39;</span><span class="token punctuation">,</span>
  <span class="token constant">DESC</span> <span class="token operator">=</span> <span class="token string">&#39;desc&#39;</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">type</span> <span class="token class-name">SortBy</span> <span class="token operator">=</span> <span class="token punctuation">{</span> key<span class="token operator">:</span> KeyType<span class="token punctuation">;</span> Order<span class="token operator">:</span> SortOrder <span class="token punctuation">}</span>
<span class="token keyword">type</span> <span class="token class-name">SortState</span> <span class="token operator">=</span> Record<span class="token operator">&lt;</span>KeyType<span class="token punctuation">,</span> SortOrder<span class="token operator">&gt;</span>
</code></pre></div></details><h2 id="faqs" tabindex="-1">FAQs <a class="header-anchor vp-link" href="#faqs" aria-hidden="true">#</a></h2><h4 id="how-do-i-render-a-list-with-a-checkbox-in-the-first-column" tabindex="-1">How do I render a list with a checkbox in the first column? <a class="header-anchor vp-link" href="#how-do-i-render-a-list-with-a-checkbox-in-the-first-column" aria-hidden="true">#</a></h4><p>Since you are allowed to define your own cell renderer, you can do what the example <a href="#customize-cell-renderer" class="vp-link">Customize Cell Renderer</a> did to render <code>checkbox</code> yourself, and maintain the state by yourself.</p><h4 id="why-does-virtualized-table-provide-less-features-than-tablev1" tabindex="-1">Why does virtualized table provide less features than <a href="./table.html" class="vp-link">TableV1</a> <a class="header-anchor vp-link" href="#why-does-virtualized-table-provide-less-features-than-tablev1" aria-hidden="true">#</a></h4><p>For virtualized table, we intend to provide less feature and let our users implement their own features as needed. Integrating too many features makes the code hard to maintain and for most users the basic features are enough. Some key features were not developed yet. We would love to hear from you. Join <a href="https://discord.com/invite/gXK9XNzW3X" class="vp-link" target="_blank" rel="noopener noreferrer">Discord<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> to stay tuned.</p><h2 id="source" tabindex="-1">Source <a class="header-anchor vp-link" href="#source" aria-hidden="true">#</a></h2><p><a href="https://github.com/element-plus/element-plus/tree/dev/packages/components/table-v2" class="vp-link" target="_blank" rel="noopener noreferrer">Component<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a> • <a href="https://github.com/element-plus/element-plus/blob/dev/docs/en-US/component/table-v2.md" class="vp-link" target="_blank" rel="noopener noreferrer">Docs<svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" class="link-icon"><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg></a></p><h2 id="contributors" tabindex="-1">Contributors <a class="header-anchor vp-link" href="#contributors" aria-hidden="true">#</a></h2><div class="mb-4" data-v-2c2cd08f><div class="flex flex-wrap gap-4 pt-2" data-v-2c2cd08f><!--[--><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/jw-foss" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/15975785?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> JeremyWuuuuu<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/btea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/24516654?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> btea<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/chenxch" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23251408?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/tolking" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23313167?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> qiang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Tsong-LC" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/50739490?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LIUCHAO<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/makedopamine" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/93767616?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> dopamine<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/holazz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/23100055?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zz<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kooriookami" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/38392315?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> kooriookami<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/YunYouJun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/25154432?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 云游君<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/Whbbit1999" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/60510247?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Whbbit1999<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/FrontEndDog" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/46493087?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 一只前端汪<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/MrWeilian" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30046649?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 井柏然<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/xiaochenchen-igg-com" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/169252980?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Xc<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/sxzz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/6481596?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 三咲智子<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/webfansplz" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/22515951?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> webfansplz<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/zwgwf" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/134276765?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zwgwf<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/warmthsea" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/45450994?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> sea / 神秘海<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/KimYangOfCat" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/32960305?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Kim Yang<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/SignDawn" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/48878568?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> SignDawn<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/lxKylin" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/75473409?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Kylin<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/kankan-web" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/78799103?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Mafia<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/yj-liuzepeng" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/75007029?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> zepeng<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/MilesTails01" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/83541965?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> Tommy<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/huangguangfa" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/46232212?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> xy<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/onishi-kohei" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/62194324?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> 0024<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/loosheng" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/30114549?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> LooSheng<!--]--><!----></a></div><div data-v-2c2cd08f><a class="link-item link flex gap-2 items-center link" href="https://github.com/iamkun" target="_blank" rel="noopener noreferrer" data-v-2c2cd08f data-v-36735cb0><!--[--><img src="https://avatars.githubusercontent.com/u/17680888?v=4&amp;size=64" class="w-8 h-8 rounded-full" loading="lazy" data-v-2c2cd08f> iamkun<!--]--><!----></a></div><!--]--></div></div></div></div><footer class="page-footer" data-v-3e2f3e7f><div class="edit" data-v-3e2f3e7f><div class="edit-link" data-v-3e2f3e7f data-v-7d4aa2c8><a class="link text-sm" href="https://github.com/element-plus/element-plus/edit/dev/docs/en-US/component/table-v2.md" target="_blank" rel="noopener noreferrer" data-v-7d4aa2c8>Edit this page on GitHub <i class="el-icon" style="font-size:16px;vertical-align:text-top;line-height:24px;" data-v-7d4aa2c8><!--[--><svg preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" width="1.2em" height="1.2em" data-v-7d4aa2c8><path fill="currentColor" d="M10 6v2H5v11h11v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h6zm11-3v8h-2V6.413l-7.793 7.794l-1.414-1.414L17.585 5H13V3h8z"></path></svg><!--]--></i></a></div></div></footer><div class="next-and-prev-link" data-v-8ad25866><div class="container" data-v-8ad25866><div class="prev" data-v-8ad25866><a class="link" href="/en-US/component/table" data-v-8ad25866><i class="el-icon mr-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i><span class="text" data-v-8ad25866>Table</span></a></div><div class="next" data-v-8ad25866><a class="link" href="/en-US/component/tag" data-v-8ad25866><span class="text" data-v-8ad25866>Tag</span><i class="el-icon ml-1" style="" data-v-8ad25866><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 1024 1024" data-v-8ad25866><path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path></svg><!--]--></i></a></div></div></div></div><aside class="toc-wrapper" data-v-6f13b908><nav class="toc-content" data-v-6f13b908><h3 class="toc-content__heading" data-v-6f13b908>Contents</h3><!----><p class="text-14px font-300 color-$text-color-secondary" data-v-6f13b908>Sponsored by</p><div class="join sponsors-button mt-4 w-100%" data-v-6f13b908><!--[--><a href="mailto:element-plus@outlook.com" target="_blank" class="el-tooltip__trigger"><button ariadisabled="false" type="button" class="el-button" style="overflow:hidden;"><!--v-if--><span class=""><!--[-->Become a Sponsor!<!--]--></span></button></a><!--teleport start--><!--teleport end--><!--]--></div><div class="right-big" data-v-6f13b908 data-v-1a999eaa><!--[--><a href="http://github.crmeb.net/u/Element?from=element-plus" title="CRMEB - 高品质开源商城系统 累计服务40W+开发者" target="_blank" data-v-1a999eaa><div class="flex bg-#F9F9F9 h-64px rd-4px justify-center items-center" data-v-1a999eaa><div class="h-36px" data-v-1a999eaa><img class="rd-4px h-full" src="/images/sponsors/CRMEB-l.png" alt="CRMEB" data-v-1a999eaa></div></div></a><!--]--></div><div class="flex flex-wrap justify-between right-small" data-v-6f13b908 data-v-1e0a70fc><!--[--><!--[--><a href="https://doc.buildadmin.com/?from=element-plus" title="BuildAdmin - Vue3企业级开源后台管理系统" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/buildadmin-l.png" alt="BuildAdmin" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="http://www.i-renderer.love/home/index" title="百搭云 - 快速且优雅的低代码平台" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/sponsors/baidayun.png" alt="百搭云" data-v-1e0a70fc></div></a><!--]--><!--[--><a href="https://bit.dev/?from=element-ui" title="bit - Share Code" target="_blank" data-v-1e0a70fc><div class="flex m-b-4px bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><img src="/images/bit-l.png" alt="bit" data-v-1e0a70fc></div></a><!--]--><!--[--><div class="flex bg-#F9F9F9 rd-0px h-42px w-95px justify-center items-center" data-v-1e0a70fc><div class="color-#ddd text-13px cursor-default" data-v-1e0a70fc>Your logo</div></div><!--]--><!--]--></div><div class="right-rich" data-v-6f13b908 data-v-84253628><!--[--><!--]--></div></nav></aside></div><footer class="footer"><div class="footer-main"><h4>Links</h4><a href="https://github.com/element-plus/element-plus" class="footer-main-link" target="_blank">GitHub</a><a href="https://cn.element-plus.org/zh-CN/" class="footer-main-link" target="_blank">China Mirror 🇨🇳</a><a href="https://github.com/element-plus/element-plus/releases" class="footer-main-link" target="_blank">Changelog</a><a href="https://element.eleme.io/" class="footer-main-link" target="_blank">Element UI for Vue 2</a></div><div class="footer-main"><h4>Community</h4><a href="https://discord.com/invite/gXK9XNzW3X" class="footer-main-link" target="_blank">Discord</a><a href="https://github.com/element-plus/element-plus/issues" class="footer-main-link" target="_blank">Feedback</a><a href="https://github.com/element-plus/element-plus/blob/dev/.github/CONTRIBUTING.en-US.md" class="footer-main-link" target="_blank">Contribution</a><a href="https://segmentfault.com/t/element-plus" class="footer-main-link" target="_blank">SegmentFault</a></div></footer></main><!----></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"en-us_component_affix.md\":\"ff7dffa4\",\"en-us_component_alert.md\":\"cd5a1e5a\",\"en-us_component_anchor.md\":\"9a48cc9f\",\"en-us_component_autocomplete.md\":\"0f589547\",\"en-us_component_avatar.md\":\"02c0aba6\",\"en-us_component_backtop.md\":\"7b0c1932\",\"en-us_component_badge.md\":\"002e14a4\",\"en-us_component_border.md\":\"1ca6f965\",\"en-us_component_breadcrumb.md\":\"2ef63731\",\"en-us_component_button.md\":\"1063d204\",\"en-us_component_calendar.md\":\"eb9d1675\",\"en-us_component_card.md\":\"39e55f42\",\"en-us_component_carousel.md\":\"32115767\",\"en-us_component_cascader.md\":\"bf8dbc75\",\"en-us_component_checkbox.md\":\"98dc0f53\",\"en-us_component_collapse.md\":\"67a5c313\",\"en-us_component_color-picker.md\":\"50cd4caa\",\"en-us_component_color.md\":\"29417b31\",\"en-us_component_config-provider.md\":\"3463b447\",\"en-us_component_container.md\":\"85e4bdf3\",\"en-us_component_date-picker.md\":\"68c06f9e\",\"en-us_component_datetime-picker.md\":\"b999a872\",\"en-us_component_descriptions.md\":\"339dc63b\",\"en-us_component_dialog.md\":\"2cf8cf86\",\"en-us_component_divider.md\":\"421eb5f2\",\"en-us_component_drawer.md\":\"024b53e9\",\"en-us_component_dropdown.md\":\"7ac24bed\",\"en-us_component_empty.md\":\"29b5b47b\",\"en-us_component_form.md\":\"7458dbb1\",\"en-us_component_icon.md\":\"3426aa0f\",\"en-us_component_image.md\":\"ac3532a8\",\"en-us_component_infinite-scroll.md\":\"4c6f7159\",\"en-us_component_input-number.md\":\"a5c4cb11\",\"en-us_component_input.md\":\"c16e2da7\",\"en-us_component_layout.md\":\"2b2af71d\",\"en-us_component_link.md\":\"d30a5d74\",\"en-us_component_loading.md\":\"c6e5ea76\",\"en-us_component_menu.md\":\"e0e7d7ac\",\"en-us_component_message-box.md\":\"fc32bd92\",\"en-us_component_message.md\":\"cd41cb05\",\"en-us_component_notification.md\":\"56a6f299\",\"en-us_component_overview.md\":\"110e854b\",\"en-us_component_page-header.md\":\"38a29a2d\",\"en-us_component_pagination.md\":\"fe79df34\",\"en-us_component_popconfirm.md\":\"503fa4ae\",\"en-us_component_popover.md\":\"e14a3c24\",\"en-us_component_progress.md\":\"3b77a4ca\",\"en-us_component_radio.md\":\"95514d81\",\"en-us_component_rate.md\":\"3ed19909\",\"en-us_component_result.md\":\"081f424e\",\"en-us_component_scrollbar.md\":\"9562ac05\",\"en-us_component_segmented.md\":\"43777257\",\"en-us_component_select-v2.md\":\"8273ca64\",\"en-us_component_select.md\":\"6dfded09\",\"en-us_component_skeleton.md\":\"e5852963\",\"en-us_component_slider.md\":\"16325e17\",\"en-us_component_space.md\":\"3f2861d9\",\"en-us_component_statistic.md\":\"2a66f18b\",\"en-us_component_steps.md\":\"c0c48d3f\",\"en-us_component_switch.md\":\"bc045b26\",\"en-us_component_table-v2.md\":\"2105af2e\",\"en-us_component_table.md\":\"f8c35834\",\"en-us_component_tabs.md\":\"f908f1e5\",\"en-us_component_tag.md\":\"77cd984c\",\"en-us_component_text.md\":\"1580f3e6\",\"en-us_component_time-picker.md\":\"84d6f56c\",\"en-us_component_time-select.md\":\"be608e21\",\"en-us_component_timeline.md\":\"186bed11\",\"en-us_component_tooltip-v2.md\":\"a6daced0\",\"en-us_component_tooltip.md\":\"231fba09\",\"en-us_component_tour.md\":\"837136bc\",\"en-us_component_transfer.md\":\"91a8f888\",\"en-us_component_tree-select.md\":\"5479b050\",\"en-us_component_tree-v2.md\":\"9dc2154b\",\"en-us_component_tree.md\":\"955130e4\",\"en-us_component_typography.md\":\"daf0375f\",\"en-us_component_upload.md\":\"d9accc95\",\"en-us_component_watermark.md\":\"443e8fcb\",\"en-us_guide_changelog.md\":\"3c084145\",\"en-us_guide_commit-examples.md\":\"cc45ed9c\",\"en-us_guide_dark-mode.md\":\"9256892d\",\"en-us_guide_design.md\":\"eac1a1f4\",\"en-us_guide_dev-faq.md\":\"cf746748\",\"en-us_guide_dev-guide.md\":\"d06336e2\",\"en-us_guide_i18n.md\":\"bd361557\",\"en-us_guide_installation.md\":\"85f92b17\",\"en-us_guide_migration.md\":\"0c9aab31\",\"en-us_guide_namespace.md\":\"6affb523\",\"en-us_guide_nav.md\":\"725829ca\",\"en-us_guide_quickstart.md\":\"27523655\",\"en-us_guide_ssr.md\":\"44fd7343\",\"en-us_guide_theming.md\":\"ae3aa2cd\",\"en-us_guide_transitions.md\":\"270de32e\",\"en-us_guide_translation.md\":\"eaabac54\",\"en-us_index.md\":\"2d298cdd\",\"en-us_resource_index.md\":\"34f01ea5\",\"es-es_component_affix.md\":\"6a1bdcbe\",\"es-es_component_alert.md\":\"aa7f77f7\",\"es-es_component_anchor.md\":\"763d2056\",\"es-es_component_autocomplete.md\":\"c422535c\",\"es-es_component_avatar.md\":\"391d791e\",\"es-es_component_backtop.md\":\"97c778cd\",\"es-es_component_badge.md\":\"d4198a37\",\"es-es_component_border.md\":\"c4431903\",\"es-es_component_breadcrumb.md\":\"d8545b03\",\"es-es_component_button.md\":\"e539188f\",\"es-es_component_calendar.md\":\"f682be1c\",\"es-es_component_card.md\":\"4d07a461\",\"es-es_component_carousel.md\":\"5f248bd0\",\"es-es_component_cascader.md\":\"f1da98ff\",\"es-es_component_checkbox.md\":\"e9665537\",\"es-es_component_collapse.md\":\"63f23fe8\",\"es-es_component_color-picker.md\":\"35223bc5\",\"es-es_component_color.md\":\"ecf66faa\",\"es-es_component_config-provider.md\":\"62ac5005\",\"es-es_component_container.md\":\"5844a08e\",\"es-es_component_date-picker.md\":\"a8755dbd\",\"es-es_component_datetime-picker.md\":\"445a7fe9\",\"es-es_component_descriptions.md\":\"7a88f91a\",\"es-es_component_dialog.md\":\"dcf50de9\",\"es-es_component_divider.md\":\"6f5b07f5\",\"es-es_component_drawer.md\":\"140c918c\",\"es-es_component_dropdown.md\":\"bcce96bc\",\"es-es_component_empty.md\":\"ccd86c17\",\"es-es_component_form.md\":\"f61ce21a\",\"es-es_component_icon.md\":\"50ac8e2d\",\"es-es_component_image.md\":\"8df18281\",\"es-es_component_infinite-scroll.md\":\"4419ba97\",\"es-es_component_input-number.md\":\"f8e08c67\",\"es-es_component_input.md\":\"c22c21f5\",\"es-es_component_layout.md\":\"787b2ad6\",\"es-es_component_link.md\":\"a79dfebf\",\"es-es_component_loading.md\":\"ae2cc3a8\",\"es-es_component_menu.md\":\"0adc6293\",\"es-es_component_message-box.md\":\"285f035c\",\"es-es_component_message.md\":\"b523dd42\",\"es-es_component_notification.md\":\"a0c9ea84\",\"es-es_component_overview.md\":\"5c7beefe\",\"es-es_component_page-header.md\":\"fbdbe268\",\"es-es_component_pagination.md\":\"6d21ed8c\",\"es-es_component_popconfirm.md\":\"944cf7f2\",\"es-es_component_popover.md\":\"c5c82a9d\",\"es-es_component_progress.md\":\"09e7e5fa\",\"es-es_component_radio.md\":\"7e9e6292\",\"es-es_component_rate.md\":\"8b333a70\",\"es-es_component_result.md\":\"403b624b\",\"es-es_component_scrollbar.md\":\"b9593bab\",\"es-es_component_segmented.md\":\"64c094d9\",\"es-es_component_select-v2.md\":\"95c9a85e\",\"es-es_component_select.md\":\"692b62a4\",\"es-es_component_skeleton.md\":\"0e6b07c4\",\"es-es_component_slider.md\":\"8e33f911\",\"es-es_component_space.md\":\"1b2a1f23\",\"es-es_component_statistic.md\":\"152a0721\",\"es-es_component_steps.md\":\"2d5805b7\",\"es-es_component_switch.md\":\"d44665e8\",\"es-es_component_table-v2.md\":\"84df4bd5\",\"es-es_component_table.md\":\"18789f35\",\"es-es_component_tabs.md\":\"d72771ad\",\"es-es_component_tag.md\":\"43e81918\",\"es-es_component_text.md\":\"1fcfb5cb\",\"es-es_component_time-picker.md\":\"bf4c067e\",\"es-es_component_time-select.md\":\"92f79417\",\"es-es_component_timeline.md\":\"4c2ff30c\",\"es-es_component_tooltip-v2.md\":\"8b8acbad\",\"es-es_component_tooltip.md\":\"4991646a\",\"es-es_component_tour.md\":\"11bc9eff\",\"es-es_component_transfer.md\":\"e8315055\",\"es-es_component_tree-select.md\":\"8481ec73\",\"es-es_component_tree-v2.md\":\"1f8e11fe\",\"es-es_component_tree.md\":\"13b0bb92\",\"es-es_component_typography.md\":\"9270c5de\",\"es-es_component_upload.md\":\"574f8475\",\"es-es_component_watermark.md\":\"5430e1d8\",\"es-es_guide_changelog.md\":\"1a5b87b0\",\"es-es_guide_commit-examples.md\":\"e6a58951\",\"es-es_guide_dark-mode.md\":\"85f904cf\",\"es-es_guide_design.md\":\"dd162f49\",\"es-es_guide_dev-faq.md\":\"7c4ae8da\",\"es-es_guide_dev-guide.md\":\"3ae1c952\",\"es-es_guide_i18n.md\":\"2118baa5\",\"es-es_guide_installation.md\":\"95803516\",\"es-es_guide_migration.md\":\"3f132e7e\",\"es-es_guide_namespace.md\":\"9856f155\",\"es-es_guide_nav.md\":\"63349cda\",\"es-es_guide_quickstart.md\":\"b1ad1aef\",\"es-es_guide_ssr.md\":\"791df483\",\"es-es_guide_theming.md\":\"97ccf28e\",\"es-es_guide_transitions.md\":\"29cf69a4\",\"es-es_guide_translation.md\":\"5bcefea4\",\"es-es_index.md\":\"1c9a711f\",\"es-es_resource_index.md\":\"f1abbb68\",\"index.md\":\"fe916efd\",\"zh-cn_component_affix.md\":\"cf647355\",\"zh-cn_component_alert.md\":\"eca392e8\",\"zh-cn_component_anchor.md\":\"7a786896\",\"zh-cn_component_autocomplete.md\":\"0fde91c7\",\"zh-cn_component_avatar.md\":\"ba24b56b\",\"zh-cn_component_backtop.md\":\"460d34db\",\"zh-cn_component_badge.md\":\"681178b5\",\"zh-cn_component_border.md\":\"87fc466a\",\"zh-cn_component_breadcrumb.md\":\"535bd42c\",\"zh-cn_component_button.md\":\"4128e583\",\"zh-cn_component_calendar.md\":\"d680314d\",\"zh-cn_component_card.md\":\"0f0f5afe\",\"zh-cn_component_carousel.md\":\"f902fc9f\",\"zh-cn_component_cascader.md\":\"c569aa5b\",\"zh-cn_component_checkbox.md\":\"54316312\",\"zh-cn_component_collapse.md\":\"26965384\",\"zh-cn_component_color-picker.md\":\"5f013e2e\",\"zh-cn_component_color.md\":\"b37f2def\",\"zh-cn_component_config-provider.md\":\"7e48316b\",\"zh-cn_component_container.md\":\"43636a70\",\"zh-cn_component_date-picker.md\":\"0217cca1\",\"zh-cn_component_datetime-picker.md\":\"60d69e0b\",\"zh-cn_component_descriptions.md\":\"6a2c5fcc\",\"zh-cn_component_dialog.md\":\"ba52e130\",\"zh-cn_component_divider.md\":\"639191e5\",\"zh-cn_component_drawer.md\":\"3a0bf571\",\"zh-cn_component_dropdown.md\":\"fa84f7c5\",\"zh-cn_component_empty.md\":\"c7635b32\",\"zh-cn_component_form.md\":\"d52ec6dc\",\"zh-cn_component_icon.md\":\"0487a8b6\",\"zh-cn_component_image.md\":\"9c120e45\",\"zh-cn_component_infinite-scroll.md\":\"38f46d39\",\"zh-cn_component_input-number.md\":\"8a71ee3f\",\"zh-cn_component_input.md\":\"d35eeb9c\",\"zh-cn_component_layout.md\":\"bc675fd0\",\"zh-cn_component_link.md\":\"89225971\",\"zh-cn_component_loading.md\":\"c9fae5ab\",\"zh-cn_component_menu.md\":\"bc7746a1\",\"zh-cn_component_message-box.md\":\"cb16e084\",\"zh-cn_component_message.md\":\"8be6a0d4\",\"zh-cn_component_notification.md\":\"002c9ad3\",\"zh-cn_component_overview.md\":\"3c3503ad\",\"zh-cn_component_page-header.md\":\"f1153fa0\",\"zh-cn_component_pagination.md\":\"7e316c0d\",\"zh-cn_component_popconfirm.md\":\"c8c261e8\",\"zh-cn_component_popover.md\":\"33396fe1\",\"zh-cn_component_progress.md\":\"a45ad1c6\",\"zh-cn_component_radio.md\":\"8d6a36fc\",\"zh-cn_component_rate.md\":\"b9374d23\",\"zh-cn_component_result.md\":\"da3ebb19\",\"zh-cn_component_scrollbar.md\":\"ed75c308\",\"zh-cn_component_segmented.md\":\"e983c8d7\",\"zh-cn_component_select-v2.md\":\"67dccf39\",\"zh-cn_component_select.md\":\"6d3c3517\",\"zh-cn_component_skeleton.md\":\"f43e715e\",\"zh-cn_component_slider.md\":\"a4306965\",\"zh-cn_component_space.md\":\"a3738b82\",\"zh-cn_component_statistic.md\":\"5bf4a0ca\",\"zh-cn_component_steps.md\":\"268b6c0d\",\"zh-cn_component_switch.md\":\"fee6f016\",\"zh-cn_component_table-v2.md\":\"7351c605\",\"zh-cn_component_table.md\":\"191078c2\",\"zh-cn_component_tabs.md\":\"43ccd873\",\"zh-cn_component_tag.md\":\"3243911c\",\"zh-cn_component_text.md\":\"e78046cb\",\"zh-cn_component_time-picker.md\":\"c889f795\",\"zh-cn_component_time-select.md\":\"9037b9bc\",\"zh-cn_component_timeline.md\":\"31c1d81c\",\"zh-cn_component_tooltip-v2.md\":\"7d03850d\",\"zh-cn_component_tooltip.md\":\"a254e320\",\"zh-cn_component_tour.md\":\"c2d42a56\",\"zh-cn_component_transfer.md\":\"f9d17f68\",\"zh-cn_component_tree-select.md\":\"be190e71\",\"zh-cn_component_tree-v2.md\":\"33e2a835\",\"zh-cn_component_tree.md\":\"c0d917d7\",\"zh-cn_component_typography.md\":\"958c01ce\",\"zh-cn_component_upload.md\":\"5e3a45cf\",\"zh-cn_component_watermark.md\":\"709c9962\",\"zh-cn_guide_changelog.md\":\"006e3eb8\",\"zh-cn_guide_commit-examples.md\":\"470a0272\",\"zh-cn_guide_dark-mode.md\":\"a8280f1d\",\"zh-cn_guide_design.md\":\"ecdfbc64\",\"zh-cn_guide_dev-faq.md\":\"3f406323\",\"zh-cn_guide_dev-guide.md\":\"fc4f7b58\",\"zh-cn_guide_i18n.md\":\"2bd9c6ed\",\"zh-cn_guide_installation.md\":\"8dda845f\",\"zh-cn_guide_migration.md\":\"152c0c06\",\"zh-cn_guide_namespace.md\":\"1489fc56\",\"zh-cn_guide_nav.md\":\"c82ea1cc\",\"zh-cn_guide_quickstart.md\":\"598a5162\",\"zh-cn_guide_ssr.md\":\"1faa6801\",\"zh-cn_guide_theming.md\":\"22b9a49a\",\"zh-cn_guide_transitions.md\":\"b40dd547\",\"zh-cn_guide_translation.md\":\"87f8e34c\",\"zh-cn_index.md\":\"209bfa3f\",\"zh-cn_resource_index.md\":\"07b05f83\"}")</script>
    <script type="module" async src="/assets/app.9c6c24e4.js"></script>
    
  </body>
</html>